<template>
  <div class="table_edit">
    <Table border stripe :columns="tableColumns" :data="menuData"></Table>
    <Button type="success" @click="add">新增</Button>
    <Button type="success" @click="back" v-if="menuData.length > 0 && menuData[0]['pId'] > 0">返回</Button>
  </div>
</template>
<script>
import { getParentById } from '@/libs/util'

export default {

  data () {
    return {
      tableColumns: [
        // 自定义表格render
        {
          title: '序号',
          key: 'MENU_ORDER',
          width: 100
        },
        {
          title: '名称',
          key: 'name',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: params.row.ICON,
                  size: 18
                },
                style: {
                  'margin-right': '10px'
                }
              }),
              h(
                'a',
                {
                  on: {
                    click: () => {
                      let childs = params.row.nodes
                      if (childs.length > 0) {
                        // 存在子节点
                        this.menuData = childs
                        this.$emit('stepIntoSubMenEvent', childs, 1)
                      } else {
                        // 不存在子节点
                        this.menuData = []
                        this.$emit('stepIntoSubMenEvent', params.row, 2)
                      }
                    }
                  }
                },
                params.row.name
              ),
              h('span', {}, params.row.type)
            ])
          }
        },
        {
          title: '资源路径',
          key: 'PATH'
        },
        {
          title: '状态',
          key: 'MENU_STATE',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: parseInt(params.row.MENU_STATE) === 1 ? 'ios-eye' : 'ios-eye-off',
                  size: 20
                }
              })
            ])
          }
        },
        {
          title: '操作',
          key: 'edit',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'md-image',
                  size: 20,
                  color: '#478fca'
                },
                style: {
                  marginRight: '5px',
                  cursor: 'pointer'
                },
                on: {
                  click: () => {
                    // 编辑icon
                    this.$emit('editMenuIconEvent', params.row)
                  }
                }
              }),
              h('Icon', {
                props: {
                  type: 'md-settings',
                  size: 20,
                  color: '#69aa46'
                },
                style: {
                  marginRight: '5px',
                  cursor: 'pointer'
                },
                on: {
                  click: () => {
                    // 编辑菜单
                    let menu = params.row
                    let parant = getParentById(this.allMenu, menu['pId'])
                    menu['parent_name'] = parant['name']
                    this.showEdit(menu)
                  }
                }
              }),
              h('Icon', {
                props: {
                  type: 'ios-trash',
                  size: 20,
                  color: '#dd5a43'
                },
                style: {
                  marginRight: '5px',
                  cursor: 'pointer'
                },
                on: {
                  click: () => {
                    // 删除菜单
                    let id = params.row.id
                    this.deleteMenu(id)
                  }
                }
              })
            ])
          }
        }
      ]
    }
  },
  computed: {
    menuData: {
      get: function () {
        return this.menuNodes
      },
      set: function (data) {
        this.$emit('menuDataChangeEvent', data)
      }
    }
  },
  props: {
    allMenu: Array,
    menuNodes: Array
  },
  methods: {
    showEdit: function (id) {
      this.$emit('setCurrentMenuEvent', id)
    },
    add: function () {
      // 新增
      this.$emit('addMenuEvent')
    },
    back: function () {
      // 返回
      // console.log(this.menuData)
      this.$emit('backToParentMenuEvent', this.menuData)
    },
    deleteMenu: function (id) {
      // 删除
      this.$emit('deleteMenuEvent', id)
    }
  }

}
</script>
<style></style>
